<template>
  <div class="pad5">
    <div class="padb5">
      <title-a>通用入库</title-a>
    </div>
    <div class="bcf round3 ofh pad5">
      <ez-item-picker v-model="model.itemId"></ez-item-picker>
    </div>
    <mu-card class="bcf round3 pad5 mart5">
      <title-a>入库信息</title-a>
      <div class="pad5">
        <EzData :config="inConfig" v-model="model">
          <div slot="sub" class="padt7 tar">
            <mu-button @click="submit" color="primary">入库</mu-button>
            <mu-button @click="submitAndPrint" color="secondary">入库并打印</mu-button>
          </div>
        </EzData>
      </div>
    </mu-card>
    <mu-card class="round3 pad5 mart5">
      <title-a>库存情况</title-a>
      <div class="padt5 padb10">
        <div class="flrc pad3 mdui-color-blue-50" v-for="(base,index) in itemInfo.base" :key="index">
          <div class="flex1">{{ base.item.text }}</div>
          <div class="flex1">{{ base.item.code }}</div>
          <div class="flex1">
            <span>{{ base.num }}</span>
            <template v-if="!!base.item.unit"> ( <span>{{ base.item.unit.name }}</span> )</template>
          </div>
        </div>
        <div v-show="itemInfo.base.length === 0" class="pad10 mar5 bdsa tac c12">
          暂无数据
        </div>
      </div>
    </mu-card>
    <mu-card class="round3 pad5 mart5">
      <title-a>入库记录</title-a>
      <div class="padt5">
        <div class="flrc pad3 bdbso">
          <div class="flex1">入库类型</div>
          <div class="flex1">名称</div>
          <div class="flex1">编号</div>
          <div class="flex1">指令单号</div>
          <div class="flex1">批次号</div>
          <div class="flex1">经办人</div>
          <div class="flex1">库位号</div>
          <div class="flex1">入库 / 余量</div>
          <div class="flex1 tar">单位</div>
        </div>
        <div class="flrc pad3 bdbso" v-for="(log,index) in itemInfo.log" :key="index">
          <div class="flex1">{{ log.type.name }}</div>
          <div class="flex1">{{ log.item.text }}</div>
          <div class="flex1">{{ log.item.code }}</div>
          <div class="flex1">{{ log.brand }}</div>
          <div class="flex1">{{ log.batchCode }}</div>
          <div class="flex1">{{ log.supplier }}</div>
          <div class="flex1">{{ log.pos }}</div>
          <div class="flex1">
            <mu-linear-progress mode="determinate"
                                :max="log.numIn"
                                :value="log.numLeft"
                                :size="10" color="green"></mu-linear-progress>
            <div class="flrc">
              <div class="flex1">{{ log.numLeft }}</div>
              <div>/</div>
              <div class="flex1 tar">{{ log.numIn }}</div>
            </div>
          </div>
          <div class="flex1 tar">
            <template v-if="!!log.item.unit"> ( <span>{{ log.item.unit.name }}</span> )</template>
          </div>
        </div>
        <div v-show="itemInfo.log.length === 0" class="pad10 mar5 bdsa tac c12">
          暂无数据
        </div>
      </div>
    </mu-card>
  </div>
</template>

<script>
import EzItemPicker from "@/pages/v1/wms/componets/EzItemPicker";
import TitleA from "@/comps/comm/TitleA";
import formBuilder from "@/comps/form/formBuilder";
import EzData from "@/comps/EzData";
import apiIOType from "@/pages/v1/wms/IOType/js/apiIOType";
import apiInLog from "@/pages/v1/wms/InLog/js/apiInLog";
import apiItemMain from "@/pages/v1/wms/ItemMain/js/apiItemMain";
import apiDepartment from "@/pages/v1/wms/Department/js/apiDepartment";
export default {
  name: "ez.simple_in",
  components: {EzData, TitleA, EzItemPicker},
  data() {
    let inConfig = formBuilder()
    inConfig.addCascade("typeId", "入库类型", 2)
        .setApi(apiIOType.urlTree)
        .setApiParams({root: 1}).setRules([inConfig.R.notNull('请选择入库类型')])
    inConfig.addText("numIn", "数量", 2).setTypeNumber().setRules([inConfig.R.gt(0, "请输入数量")])
    inConfig.addCascade("departmentId","入库部门",2).setApi(apiDepartment.urlTree)
    inConfig.addText("pos", "库位", 2)
    inConfig.addText("batchCode", "批次号", 2)
    inConfig.addText("supplier", "经办人", 2)
    inConfig.addText("brand", "品牌", 2)
    inConfig.addText("note", "备注", 4)
    inConfig.addBlank("sub", "", 3)
    return {
      curSelectedItemSkuId: 0,
      itemInfo: {
        base: [],
        log: []
      },
      model: {itemId: 0},
      inConfig,
    }
  },
  mounted() {
  },
  methods: {
    getItemStorageInfo(itemId) {
      //获取物资的库存情况和库存余量
      apiItemMain.findBy({_where: {itemId: itemId}, _dumps: ["item"]}, res => {
        this.itemInfo.base = res
      })
      apiInLog.findBy({
        _where: {
          itemId: itemId,
          numLeft__gt: 0
        },
        _dumps: ["type","item","department"],
        _order: ["-id"],
        page: 0,
        limit: 0
      }, res => {
        this.itemInfo.log = res
      })
    },
    submit() {
      if (this.model.itemId === 0) {
        this.$toast.error("未选择物资")
        return
      }
      apiInLog.save(this.model, () => {
        this.getItemStorageInfo(this.model.itemId)
      })
    },
    submitAndPrint() {
      if (this.model.itemId === 0) {
        this.$toast.error("未选择物资")
        return
      }
      apiInLog.save(this.model, res => {
        this.getItemStorageInfo(this.model.itemId)
        let sn = res.data.sn
        this.$router.replace(`/v1/wms/print/inlog?sn=${sn}`)
      })
    }
  },
  watch: {
    "model.itemId"(v) {
      console.log(v)
      this.getItemStorageInfo(v)
    }
  }
}
</script>

<style scoped>

</style>